<template>
	<view>
		<i-loading v-if="loading" />
		<view class="flex flex-column" style="height: 100vh;">
			<view class="status_bar"></view>
			<view class="px-2">
				<i-search placeholder="202211000446 计工本2202 田立山" @click="toSearch" />
			</view>
			<scroll-view scroll-x class="scroll-row" style="height: 90rpx;" :scroll-with-animation="true"
				:show-scrollbar="false">
				<view class="scroll-row-item px-3" @click="changeTab(index)" v-for="(item,index) in tabBars"
					:key="index">
					<text style="line-height: 88rpx;" class="d-block"
						:class="tabIndex === index ? 'font-weight700 font36 border-bottom border-danger text-danger':'font30'">{{item.name}}</text>
				</view>
			</scroll-view>
			<swiper class="flex-1" :current="tabIndex"  @change="swiperChange" >
				<swiper-item class="flex" v-for="(item,index) in tabBars" :key="index">
					<scroll-view  class="flex-1"  scroll-y="true">
						<view v-if="item.name=='推荐'" class="pt-2 px-2">
							<i-swiper :resdata="tabBars" :width="710" :height="260" />
							<view class="mt-2">
								<i-notice-list :resdata='tabBars'  @click="moreNotice" @showClick="toNotice" />
							</view>
							<view class="mt-2 bg-white rounded-lg">
								<i-nav-list :resdata="tabBars" :column="5" />
							</view>
							<view class="">
								<i-news-list :resdata="newsList" />
							</view>
						</view>
						<view v-else  class="px-2">
							<i-news-list :resdata="newsList" />
							<i-list-left :resdata="newsList" />
							<i-video-list :resdata="newsList" />
							<i-list-right :resdata="newsList" />
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabIndex: 0,
				tabBars: [{
						name: '推荐'
					},
					{
						name: '关注'
				
					},
					{
						name: '发现'
					},
					{
						name: '视频'
					},
					{
						name: '热榜'
					},
				],
				newsList:[
					{
						title      : '王者',
						author     : '刀哥',
						createTime : '2020.09.05',
						imgs       : ['/static/photo.jpg',],
						views      : 98052
					},
					{
						id         : 2, 
						title      : '和平精英',
						author     : '刀妹',
						createTime : '2020.09.05',
						imgs       : [
							'/static/photo.jpg',
						],
						views      : 8052
					},
					{
						title      : '火影忍者',
						author     : '大硕',
						createTime : '2020.09.05',
						imgs       : [
							'/static/photo.jpg',
						],
						views      : 62012
					},
				],
				loading:true
			}
			
		},
		onLoad() {
			setTimeout(() => {
				this.loading = false
			}, 1000)
		},
		methods: {
			toSearch(e){
				console.log(e,'关键词')
			},
			changeTab(index) {
				this.tabIndex = index
			},
			swiperChange(e){
				this.tabIndex = e.detail.current
			},
			moreNotice() {
				uni.navigateTo({
					url:'/pages/notice/index'
				})
			},
			toNotice(item){
				uni.navigateTo({
					url:'/pages/notice/detail'
				})
			},
		}
	}
</script>

<style>
	
</style>
